<template>
  <view class="page">
    <!-- 背景图片 -->
    <image
        src="/static/bg11.jpg"
        mode="aspectFill"
        class="bg-image">
    </image>

    <scroll-view class="scroll-container" scroll-y>
      <view class="white-box">
        <text class="title">信息填写</text>

        <view class="form-container">
          <!-- 姓名 -->
          <view class="form-row">
            <text class="field-name">姓名：</text>
            <input
                class="form-input golden-border"
                placeholder="请输入姓名"
                v-model="formData.name"
                :placeholder-style="placeholderStyle"
            />
          </view>

          <!-- 身份证号 -->
          <view class="form-row">
            <text class="field-name">身份证号：</text>
            <input
                class="form-input golden-border"
                placeholder="18位身份证号码"
                maxlength="18"
                v-model="formData.idNumber"
                :placeholder-style="placeholderStyle"
            />
          </view>

          <!-- 通讯地址 -->
          <view class="form-row">
            <text class="field-name">通讯地址：</text>
            <input
                class="form-input golden-border"
                placeholder="以2023年开学学籍为准"
                v-model="formData.address"
                :placeholder-style="placeholderStyle"
            />
          </view>

          <!-- 就读学校 -->
          <view class="form-row">
            <text class="field-name">就读学校：</text>
            <input
                class="form-input golden-border"
                placeholder="学校全称"
                v-model="formData.school"
                :placeholder-style="placeholderStyle"
            />
          </view>

          <!-- 年级 -->
          <view class="form-row">
            <text class="field-name">年级：</text>
            <picker
                class="form-input golden-border"
                mode="selector"
                :range="gradeOptions"
                @change="gradeChange"
            >
              <text>{{formData.grade || '以2023年开学学籍为准'}}</text>
            </picker>
          </view>

          <!-- 组别（自动匹配） -->
          <view class="form-row">
            <text class="field-name">组别：</text>
            <picker
                class="form-input golden-border"
                mode="selector"
                :range="matchedGroups"
                :disabled="!formData.grade"
                @change="groupChange"
            >
              <text>{{formData.competitionGroup || (formData.grade ? '请选择' : '请先选择年级')}}</text>
            </picker>
          </view>

          <!-- 指导老师 -->
          <view class="form-row">
            <text class="field-name">指导老师：</text>
            <input
                class="form-input golden-border"
                placeholder="可选填"
                v-model="formData.teacher"
                :placeholder-style="placeholderStyle"
            />
          </view>

          <!-- 作品尺寸 -->
          <view class="form-row">
            <text class="field-name">作品尺寸：</text>
            <view class="size-inputs">
              <input
                  class="size-input golden-border"
                  placeholder="宽"
                  type="number"
                  v-model="formData.width"
                  :placeholder-style="placeholderStyle"
              />
              <text class="size-unit">cm</text>
              <input
                  class="size-input golden-border"
                  placeholder="高"
                  type="number"
                  v-model="formData.height"
                  :placeholder-style="placeholderStyle"
              />
              <text class="size-unit">cm</text>
            </view>
          </view>

          <!-- 作品类型 -->
          <view class="form-row">
            <text class="field-name">作品类型：</text>
            <view class="checkbox-group">
              <!-- 横向自动换行的单选框组 -->
              <radio-group class="radio-group" @change="handleChange">
                <label class="radio-label" v-for="item in typeOptions" :key="item.value">
                  <radio
                      :value="item.value"
                      :checked="formData.workType === item.value"
                      class="custom-radio"
                  />
                  <text class="radio-text">{{item.name}}</text>
                </label>
              </radio-group>
            </view>
          </view>

          <!-- 其他类型说明 -->
          <view class="form-row" v-if="showOtherInput">
            <text class="field-name">其他说明：</text>
            <input
                class="form-input golden-border"
                placeholder="请输入作品类型说明"
                v-model="formData.otherWorkType"
                :placeholder-style="placeholderStyle"
            />
          </view>

          <!-- 学生家长 -->
          <view class="form-row">
            <text class="field-name">学生家长：</text>
            <input
                class="form-input golden-border"
                placeholder="家长姓名"
                v-model="formData.parentName"
                :placeholder-style="placeholderStyle"
            />
          </view>

          <!-- 联系电话 -->
          <view class="form-row">
            <text class="field-name">联系电话：</text>
            <input
                class="form-input golden-border"
                placeholder="可选填"
                maxlength="11"
                type="number"
                v-model="formData.parentPhone"
                :placeholder-style="placeholderStyle"
            />
          </view>

          <button class="next-btn" @click="goToNextPage">下一步</button>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      placeholderStyle: "color:#999; text-align:left;",
      formData: {
        name: '',
        idNumber: '',
        address: '',
        school: '',
        grade: '',
        competitionGroup: '',
        teacher: '',
        width: '',
        height: '',
        workType: '',
        otherWorkType: '',
        parentName: '',
        parentPhone: ''
      },
      gradeOptions: [
        '幼儿园中班', '幼儿园大班',
        '小学一年级', '小学二年级', '小学三年级', '小学四年级', '小学五年级',
        '初中六年级', '初中七年级', '初中八年级', '初中九年级',
        '高中一年级', '高中二年级', '高中三年级'
      ],
      groupMap: {
        '幼儿园中班': '幼儿园组',
        '幼儿园大班': '幼儿园组',
        '小学一年级': '小学A组',
        '小学二年级': '小学A组',
        '小学三年级': '小学B组',
        '小学四年级': '小学B组',
        '小学五年级': '小学B组',
        '初中六年级': '初中组',
        '初中七年级': '初中组',
        '初中八年级': '初中组',
        '初中九年级': '初中组',
        '高中一年级': '高中组',
        '高中二年级': '高中组',
        '高中三年级': '高中组'
      },
      typeOptions: [
        { name: '油画', value: '油画' },
        { name: '中国画', value: '中国画' },
        { name: '版画', value: '版画' },
        { name: '水彩水粉画', value: '水彩水粉画' },
        { name: '蜡笔画', value: '蜡笔画' },
        { name: '素描速写', value: '素描速写' },
        { name: '动漫', value: '动漫' },
        { name: '线描', value: '线描' },
        { name: '数字创作（静态）', value: '数字创作（静态）' },
        { name: '数字创作（动态）', value: '数字创作（动态）' }
      ],
      currentValue: '' // 当前选中的value
    }
  },
  computed: {
    showOtherInput() {
      // return this.formData.artTypes.includes('other')
    },
    matchedGroups() {
      if (!this.formData.grade) return []
      const competitionGroup = this.groupMap[this.formData.grade]
      return competitionGroup ? [competitionGroup] : []
    }
  },
  methods: {
    gradeChange(e) {
      this.formData.grade = this.gradeOptions[e.detail.value]
      // 自动匹配组别
      this.formData.competitionGroup = this.groupMap[this.formData.grade] || ''
    },
    groupChange(e) {
      this.formData.competitionGroup = this.matchedGroups[e.detail.value]
    },
    typeChange(e, value) {
      if (e.detail.value) {
        if (!this.formData.artTypes.includes(value)) {
          this.formData.artTypes.push(value)
        }
      } else {
        this.formData.artTypes = this.formData.artTypes.filter(item => item !== value)
        if (value === 'other') {
          this.formData.otherArtType = ''
        }
      }
    },
    // 选项变更处理
    handleChange(e) {
      this.formData.workType = e.detail.value
    },
    // 获取选中的标签文本
    getSelectedLabel() {
      const selected = this.options.find(item => item.value === this.formData.artType)
      return selected ? selected.label : '未选择'
    },
    goToNextPage() {
      // 基础验证
      if (!this.formData.name) {
        uni.showToast({ title: '请输入姓名', icon: 'none' })
        return
      }
      if (!/^\d{17}[\dXx]$/.test(this.formData.idNumber)) {
        uni.showToast({ title: '身份证格式错误', icon: 'none' })
        return
      }
      if (!this.formData.grade) {
        uni.showToast({ title: '请选择年级', icon: 'none' })
        return
      }
      if (this.formData.phone && !/^1[3-9]\d{9}$/.test(this.formData.phone)) {
        uni.showToast({ title: '手机号格式错误', icon: 'none' })
        return
      }

      // 验证通过后跳转
      uni.navigateTo({
        url: '/pages/activity/upload_works',
        success: () => {
          uni.setStorageSync('formData', this.formData)
        }
      })
    }
  }
}
</script>

<style>
/* 基础样式 */
.page {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* 让背景在底层 */
}

.scroll-container {
  position: relative;
  z-index: 1;
  height: 100%;
  width: 100%;
}

.white-box {
  width: 90vw;
  max-width: 800px;
  background-color: #ffffff;
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  margin: 20px auto;
}

.title {
  color: #004AAC;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  display: block;
  margin-bottom: 30px;
}

/* 表单行样式 */
.form-row {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.field-name {
  font-size: 16px;
  color: #333;
  width: 84px;
  text-align: justify;
  text-align-last: justify;
  margin-right: 10px;
  flex-shrink: 0;
}

/* 金色边框+白色背景输入框 */
.form-input, .size-input {
  flex: 1;
  height: 40px;
  border: 1px solid #D4AF37;
  border-radius: 6px;
  padding: 0 12px;
  font-size: 14px;
  min-width: 0;
  background-color: white;
  transition: all 0.3s;
}

.form-input:focus, .size-input:focus {
  border-color: #FFD700;
  box-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
}

/* 选择器样式 */
picker.form-input {
  display: flex;
  align-items: center;
  color: #999;
}

/* 作品尺寸特殊样式 */
.size-inputs {
  flex: 1;
  display: flex;
  align-items: center;
}

.size-input {
  width: 80px;
  margin-right: 5px;
}

.size-unit {
  font-size: 14px;
  color: #D4AF37;
  margin-right: 15px;
}

/* 多选框组样式 */
.checkbox-group {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  margin-left: -10px;
}

.checkbox-item {
  width: 33.33%;
  padding: 5px 0;
  display: flex;
  align-items: center;
}

.checkbox {
  display: flex;
  align-items: center;
  margin-left: 10px;
}

checkbox {
  transform: scale(0.8);
  margin-right: 5px;
}

/* 下一步按钮 */
.next-btn {
  margin-top: 30px;
  background-color: #ff0000;
  color: white;
  border-radius: 6px;
  font-size: 16px;
  height: 44px;
  line-height: 44px;
}

.next-btn:active {
  opacity: 0.8;
}

.radio-group {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
}

.radio-label {
  display: flex;
  align-items: center;
}

.radio-dot {
  width: 16px;
  height: 16px;
  border: 1px solid #999;
  border-radius: 50%;
  margin-right: 6px;
}

.radio-dot.checked {
  background: #007AFF;
  border-color: #007AFF;
}

.radio-text {
  font-size: 14px;
  color: #333;
}
</style>